<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <title>addText.coffee</title>
  <link rel="stylesheet" href="http://github.com/jashkenas/docco/raw/0.3.0/resources/docco.css">
</head>
<body>
<div id='container'>
  <div id="background"></div>
  <div id="jump_to">
    Jump To &hellip;
    <div id="jump_wrapper">
      <div id="jump_page">
          <a class="source" href="addText.html">addText.coffee</a>
          <a class="source" href="canvasDraw.html">canvasDraw.coffee</a>
          <a class="source" href="saveImage.html">saveImage.coffee</a>
          <a class="source" href="videoToCanvas.html">videoToCanvas.coffee</a>
      </div>
    </div>
  </div>
  <table cellspacing=0 cellpadding=0>
  <thead>
    <tr>
      <th class=docs><h1>addText.coffee</h1></th>
      <th class=code></th>
    </tr>
  </thead>
  <tbody>
    <tr id='section-1'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-1">&#182;</a>
        </div>
        
      </td>
      <td class=code>
        <div class='highlight'><pre><span class="n">writeText</span> <span class="o">=</span> <span class="p">()</span> <span class="o">-&gt;</span></pre></div>
      </td>
    </tr>
    <tr id='section-2'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-2">&#182;</a>
        </div>
        <p>steal the mousedown event for the canvas for one time</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>  <span class="err">$</span><span class="p">(</span><span class="s2">&quot;#c&quot;</span><span class="p">)</span><span class="o">.</span><span class="n">one</span> <span class="s1">&#39;mousedown&#39;</span><span class="p">,</span> <span class="p">(</span><span class="n">e</span><span class="p">)</span> <span class="o">-&gt;</span>
    <span class="n">mouseX</span> <span class="o">=</span> <span class="n">e</span><span class="o">.</span><span class="n">pageX</span> <span class="o">-</span> <span class="n">this</span><span class="o">.</span><span class="n">offsetLeft</span> <span class="o">+</span> <span class="err">$</span><span class="p">(</span><span class="s2">&quot;#c&quot;</span><span class="p">)</span><span class="o">.</span><span class="n">position</span><span class="p">()</span><span class="o">.</span><span class="n">left</span>
    <span class="n">mouseY</span> <span class="o">=</span> <span class="n">e</span><span class="o">.</span><span class="n">pageY</span> <span class="o">-</span> <span class="n">this</span><span class="o">.</span><span class="n">offsetTop</span></pre></div>
      </td>
    </tr>
    <tr id='section-3'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-3">&#182;</a>
        </div>
        <p>append a text area box to the canvas where the user clicked to enter in a comment</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="n">textArea</span> <span class="o">=</span> <span class="s2">&quot;&lt;div id=&#39;textAreaPopUp&#39; style=&#39;position:absolute;top:&quot;</span><span class="o">+</span><span class="n">mouseY</span><span class="o">+</span><span class="s2">&quot;px;left:&quot;</span><span class="o">+</span><span class="n">mouseX</span><span class="o">+</span><span class="s2">&quot;px;z-index:30;&#39;&gt;&lt;textarea id=&#39;textareaTest&#39; style=&#39;width:100px;height:50px;&#39;&gt;&lt;/textarea&gt;&quot;</span>
    <span class="n">saveButton</span> <span class="o">=</span> <span class="s2">&quot;&lt;input type=&#39;button&#39; value=&#39;save&#39; id=&#39;saveText&#39; onclick=&#39;saveTextFromArea(&quot;</span><span class="o">+</span><span class="n">mouseY</span><span class="o">+</span><span class="s2">&quot;,&quot;</span><span class="o">+</span><span class="n">mouseX</span><span class="o">+</span><span class="s2">&quot;);&#39;&gt;&lt;/div&gt;&quot;</span>
    <span class="n">appendString</span> <span class="o">=</span> <span class="n">textArea</span> <span class="o">+</span> <span class="n">saveButton</span>
    <span class="err">$</span><span class="p">(</span><span class="s2">&quot;#main&quot;</span><span class="p">)</span><span class="o">.</span><span class="n">append</span> <span class="n">appendString</span>

<span class="n">saveTextFromArea</span> <span class="o">=</span> <span class="p">(</span><span class="n">y</span><span class="p">,</span><span class="n">x</span><span class="p">)</span> <span class="o">-&gt;</span></pre></div>
      </td>
    </tr>
    <tr id='section-4'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-4">&#182;</a>
        </div>
        <p>get the value of the textarea then destroy it and the save button</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>  <span class="n">text</span> <span class="o">=</span> <span class="err">$</span><span class="p">(</span><span class="s1">&#39;textarea#textareaTest&#39;</span><span class="p">)</span><span class="o">.</span><span class="n">val</span><span class="p">()</span>
  <span class="err">$</span><span class="p">(</span><span class="s1">&#39;textarea#textareaTest&#39;</span><span class="p">)</span><span class="o">.</span><span class="n">remove</span><span class="p">()</span>
  <span class="err">$</span><span class="p">(</span><span class="s1">&#39;#saveText&#39;</span><span class="p">)</span><span class="o">.</span><span class="n">remove</span><span class="p">()</span></pre></div>
      </td>
    </tr>
    <tr id='section-5'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-5">&#182;</a>
        </div>
        <p>get the canvas and add the text functions</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>  <span class="n">canvas</span> <span class="o">=</span> <span class="err">$</span><span class="p">(</span><span class="s1">&#39;#c&#39;</span><span class="p">)</span>
  <span class="n">ctx</span> <span class="o">=</span> <span class="n">canvas</span><span class="o">.</span><span class="n">getContext</span> <span class="s1">&#39;2d&#39;</span></pre></div>
      </td>
    </tr>
    <tr id='section-6'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-6">&#182;</a>
        </div>
        <p>break the text into arrays based on a text width of 100px</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>  <span class="n">phraseArray</span> <span class="o">=</span> <span class="n">getLines</span> <span class="n">ctx</span><span class="p">,</span><span class="n">text</span><span class="p">,</span><span class="mi">100</span></pre></div>
      </td>
    </tr>
    <tr id='section-7'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-7">&#182;</a>
        </div>
        <p>this adds the text functions to the ctx</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>  <span class="no">CanvasTextFunctions</span><span class="o">.</span><span class="n">enable</span> <span class="n">ctx</span>
  <span class="n">counter</span> <span class="o">=</span> <span class="mi">0</span></pre></div>
      </td>
    </tr>
    <tr id='section-8'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-8">&#182;</a>
        </div>
        <p>set the font styles</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>  <span class="n">font</span> <span class="o">=</span> <span class="s2">&quot;sans&quot;</span>
  <span class="n">fontsize</span> <span class="o">=</span> <span class="mi">16</span>
  <span class="n">ctx</span><span class="o">.</span><span class="n">strokeStyle</span> <span class="o">=</span> <span class="s2">&quot;rgba(237,229,0,1)&quot;</span>
  <span class="n">ctx</span><span class="o">.</span><span class="n">shadowOffsetX</span> <span class="o">=</span> <span class="mi">2</span>
  <span class="n">ctx</span><span class="o">.</span><span class="n">shadowOffsetY</span> <span class="o">=</span> <span class="mi">2</span>
  <span class="n">ctx</span><span class="o">.</span><span class="n">shadowBlur</span> <span class="o">=</span> <span class="mi">1</span>
  <span class="n">ctx</span><span class="o">.</span><span class="n">shadowColor</span> <span class="o">=</span> <span class="s2">&quot;rgba(0,0,0,1)&quot;</span></pre></div>
      </td>
    </tr>
    <tr id='section-9'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-9">&#182;</a>
        </div>
        <p>draw each phrase to the screen, making the top position 20px more each time so it appears there are line breaks</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>  <span class="vg">$.</span><span class="n">each</span> <span class="n">phraseArray</span><span class="p">,</span> <span class="p">()</span> <span class="o">-&gt;</span></pre></div>
      </td>
    </tr>
    <tr id='section-10'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-10">&#182;</a>
        </div>
        <p>set the placement in the canvas</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="n">lineheight</span> <span class="o">=</span> <span class="n">fontsize</span> <span class="o">*</span> <span class="mi">1</span><span class="o">.</span><span class="mi">5</span>
    <span class="n">newline</span> <span class="o">=</span> <span class="o">++</span><span class="n">counter</span>
    <span class="n">newline</span> <span class="o">=</span> <span class="n">newline</span> <span class="o">*</span> <span class="n">lineheight</span>
    <span class="n">topPlacement</span> <span class="o">=</span> <span class="n">y</span> <span class="o">-</span> <span class="err">$</span><span class="p">(</span><span class="s2">&quot;#c&quot;</span><span class="p">)</span><span class="o">.</span><span class="n">position</span><span class="p">()</span><span class="o">.</span><span class="n">top</span> <span class="o">+</span> <span class="n">newline</span>
    <span class="n">leftPlacement</span> <span class="o">=</span> <span class="n">x</span> <span class="o">-</span> <span class="err">$</span><span class="p">(</span><span class="s2">&quot;#c&quot;</span><span class="p">)</span><span class="o">.</span><span class="n">position</span><span class="p">()</span><span class="o">.</span><span class="n">left</span>
    <span class="n">text</span> <span class="o">=</span> <span class="n">this</span></pre></div>
      </td>
    </tr>
    <tr id='section-11'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-11">&#182;</a>
        </div>
        <p>draw the text</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>    <span class="n">ctx</span><span class="o">.</span><span class="n">drawText</span> <span class="n">font</span><span class="p">,</span> <span class="n">fontsize</span><span class="p">,</span> <span class="n">leftPlacement</span><span class="p">,</span> <span class="n">topPlacement</span><span class="p">,</span> <span class="n">text</span>
    <span class="n">ctx</span><span class="o">.</span><span class="n">save</span><span class="p">()</span>
    <span class="n">ctx</span><span class="o">.</span><span class="n">restore</span><span class="p">()</span></pre></div>
      </td>
    </tr>
    <tr id='section-12'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-12">&#182;</a>
        </div>
        <p>reset the drop shadow so marker lines dont have them</p>
      </td>
      <td class=code>
        <div class='highlight'><pre>  <span class="n">ctx</span><span class="o">.</span><span class="n">shadowOffsetX</span> <span class="o">=</span> <span class="mi">0</span>
  <span class="n">ctx</span><span class="o">.</span><span class="n">shadowOffsetY</span> <span class="o">=</span> <span class="mi">0</span>
  <span class="n">ctx</span><span class="o">.</span><span class="n">shadowBlur</span> <span class="o">=</span> <span class="mi">0</span>
  <span class="n">ctx</span><span class="o">.</span><span class="n">shadowColor</span> <span class="o">=</span> <span class="s2">&quot;rgba(0,0,0,0)&quot;</span>

<span class="n">getLines</span> <span class="o">=</span> <span class="p">(</span><span class="n">ctx</span><span class="p">,</span><span class="n">phrase</span><span class="p">,</span><span class="n">maxPxLength</span><span class="p">)</span> <span class="o">-&gt;</span></pre></div>
      </td>
    </tr>
    <tr id='section-13'>
      <td class=docs>
        <div class="pilwrap">
          <a class="pilcrow" href="#section-13">&#182;</a>
        </div>
        <p>break the text area text into lines based on &ldquo;box&rdquo; width</p>

      </td>
      <td class=code>
        <div class='highlight'><pre>  <span class="n">wa</span> <span class="o">=</span> <span class="n">phrase</span><span class="o">.</span><span class="n">split</span><span class="p">(</span><span class="s2">&quot; &quot;</span><span class="p">)</span>
  <span class="n">phraseArray</span> <span class="o">=</span> <span class="o">[]</span>
  <span class="n">lastPhrase</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span>
  <span class="n">l</span> <span class="o">=</span> <span class="n">maxPxLength</span>
  <span class="n">measure</span><span class="o">=</span><span class="mi">0</span>
  <span class="n">ctx</span><span class="o">.</span><span class="n">font</span> <span class="o">=</span> <span class="s2">&quot;16px sans-serif&quot;</span>
  <span class="k">for</span> <span class="n">i</span> <span class="k">in</span> <span class="n">wa</span><span class="o">.</span><span class="n">length</span>
    <span class="n">w</span> <span class="o">=</span> <span class="n">wa</span><span class="o">[</span><span class="n">i</span><span class="o">]</span>
    <span class="n">measure</span><span class="o">=</span><span class="n">ctx</span><span class="o">.</span><span class="n">measureText</span><span class="p">(</span><span class="n">lastPhrase</span><span class="o">+</span><span class="n">w</span><span class="p">)</span><span class="o">.</span><span class="n">width</span>
    <span class="k">if</span> <span class="n">measure</span> <span class="o">&lt;</span> <span class="n">l</span>
      <span class="n">lastPhrase</span> <span class="o">+=</span> <span class="p">(</span><span class="s2">&quot; &quot;</span><span class="o">+</span><span class="n">w</span><span class="p">)</span>
    <span class="k">else</span>
      <span class="n">phraseArray</span><span class="o">.</span><span class="n">push</span> <span class="n">lastPhrase</span>
      <span class="n">lastPhrase</span> <span class="o">=</span> <span class="n">w</span>
    <span class="k">if</span> <span class="n">i</span> <span class="n">is</span> <span class="n">wa</span><span class="o">.</span><span class="n">length</span><span class="o">-</span><span class="mi">1</span>
      <span class="n">phraseArray</span><span class="o">.</span><span class="n">push</span> <span class="n">lastPhrase</span>
      <span class="k">break</span>
  <span class="n">phraseArray</span></pre></div>
      </td>
    </tr>
  </table>
</div>
</body>
